<script setup>
  import { reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import * as admin from '@/api/admin.js'
  import { useRouter } from 'vue-router';
  import { useTokenStore } from '@/stores/token.js';
  import useUserInfoStore from '@/stores/userInfo.js'
  const userInfo = useUserInfoStore();
  const router = useRouter()
  const activeTab = ref('login')
  const tokenStore = useTokenStore()
  
  const loginForm = reactive({
    username: '',
    password: '',
    role: '',
  })
  
  const registerForm = reactive({
    username: '',
    password: '',
    email: '',
  })
  
  const loginRules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    role: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
  }
  
  const registerRules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
    ],
  }
  
  const loginRef = ref()
  const registerRef = ref()
  
  const submitLogin = () => {
    loginRef.value.validate(async (valid) => {
      if (valid) {
        const result = await admin.login(loginForm)
        ElMessage.success(result.msg ? result.msg : '登录成功')
        //把得到的token存储到pinia中
        tokenStore.setToken(result.token)
        //把得到的用户信息存储到pinia中
        userInfo.setInfo(result.user)
        if(loginForm.role == 'admin' || loginForm.role == 'teacher'){
            router.push('/')
        }else{
            router.push('/index')
        }
    }
  })
  }
  
  const submitRegister = () => {
    registerRef.value.validate(async (valid) => {
      if (valid) {
        const result = await admin.register(registerForm)
        ElMessage.success(result.msg ? result.msg : '注册成功')
      }
    })
  }
</script>
<template>
    <div class="login-container">
      <el-card class="login-box">
        <div class="title-box">
          <img src="https://cdn-icons-png.flaticon.com/512/847/847969.png" class="login-icon" />
          <h2 class="title">宝宝教育系统</h2>
        </div>
        <el-tabs v-model="activeTab" stretch class="login-tabs">
          <el-tab-pane label="登录" name="login">
            <el-form :model="loginForm" :rules="loginRules" ref="loginRef" label-position="top">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入用户名" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" type="password" show-password placeholder="请输入密码" />
              </el-form-item>
              <el-form-item label="用户类型" prop="role">
                <el-select v-model="loginForm.role" placeholder="选择用户类型">
                  <el-option label="管理员" value="admin" />
                  <el-option label="教师" value="teacher" />
                  <el-option label="普通用户" value="user" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="full-btn" @click="submitLogin">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
  
          <el-tab-pane label="注册" name="register">
            <el-form :model="registerForm" :rules="registerRules" ref="registerRef" label-position="top">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="registerForm.username" placeholder="请输入用户名" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="registerForm.password" type="password" show-password placeholder="请输入密码" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="registerForm.email" placeholder="请输入邮箱" />
              </el-form-item>
              <el-form-item>
                <el-button type="success" class="full-btn" @click="submitRegister">注册</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
</template>
  

  
<style scoped>
  .login-container {
    background-image: url('https://img0.baidu.com/it/u=175732496,80784896&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-box {
    width: 420px;
    padding: 30px 30px 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }
  
  .title-box {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .title {
    font-weight: bold;
    font-size: 22px;
    margin: 8px 0 0;
  }
  
  .login-icon {
    width: 48px;
    height: 48px;
  }
  
  .el-form-item {
    margin-bottom: 18px;
  }
  
  .el-input, .el-select {
    border-radius: 10px;
    transition: all 0.3s;
  }
  
  .el-input:focus-within,
  .el-select:focus-within {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
  
  .full-btn {
    width: 100%;
    height: 42px;
    font-size: 16px;
    border-radius: 10px;
  }
  
  .login-tabs ::v-deep .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
  </style>
  